<template>
  <div class="settings-container">
    <div class="page-header">
      <h1>设置</h1>
      <div class="action-buttons">
        <button class="btn btn-primary" @click="saveSettings">
          <span class="btn-icon">💾</span> 保存设置
        </button>
        <button class="btn btn-secondary" @click="resetSettings">
          <span class="btn-icon">🔄</span> 重置设置
        </button>
      </div>
    </div>

    <div class="settings-content">
      <!-- 常规设置 -->
      <div class="settings-section">
        <h2 class="section-title">常规设置</h2>

        <div class="setting-item">
          <div class="setting-label">
            <span>主题</span>
            <span class="setting-description">选择应用的显示主题</span>
          </div>
          <div class="setting-control">
            <select v-model="settings.theme" class="select-control">
              <option value="light">浅色</option>
              <option value="dark">深色</option>
              <option value="auto">跟随系统</option>
            </select>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-label">
            <span>语言</span>
            <span class="setting-description">选择应用的显示语言</span>
          </div>
          <div class="setting-control">
            <select v-model="settings.language" class="select-control">
              <option value="zh-CN">简体中文</option>
              <option value="en-US">English (US)</option>
              <option value="ja-JP">日本語</option>
            </select>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-label">
            <span>自动更新</span>
            <span class="setting-description">应用启动时自动检查更新</span>
          </div>
          <div class="setting-control">
            <label class="toggle">
              <input type="checkbox" v-model="settings.autoUpdate" />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 文件设置 -->
      <div class="settings-section">
        <h2 class="section-title">文件设置</h2>

        <div class="setting-item">
          <div class="setting-label">
            <span>默认保存位置</span>
            <span class="setting-description">设置文件的默认保存路径</span>
          </div>
          <div class="setting-control path-control">
            <input type="text" v-model="settings.savePath" readonly />
            <button class="path-btn" @click="selectSavePath">选择</button>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-label">
            <span>自动保存</span>
            <span class="setting-description"
              >自动保存文件间隔时间（分钟）</span
            >
          </div>
          <div class="setting-control">
            <input
              type="range"
              min="0"
              max="30"
              step="1"
              v-model.number="settings.autoSaveInterval"
              class="range-control"
            />
            <span class="range-value"
              >{{ settings.autoSaveInterval }}分钟
              {{ settings.autoSaveInterval === 0 ? "(禁用)" : "" }}</span
            >
          </div>
        </div>
      </div>

      <!-- 地图设置 -->
      <div class="settings-section">
        <h2 class="section-title">地图设置</h2>

        <div class="setting-item">
          <div class="setting-label">
            <span>默认地图提供商</span>
            <span class="setting-description">选择默认的地图服务提供商</span>
          </div>
          <div class="setting-control">
            <select v-model="settings.mapProvider" class="select-control">
              <option value="google">Google 地图</option>
              <option value="baidu">百度地图</option>
              <option value="amap">高德地图</option>
            </select>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-label">
            <span>离线地图</span>
            <span class="setting-description">下载并启用离线地图功能</span>
          </div>
          <div class="setting-control">
            <label class="toggle">
              <input type="checkbox" v-model="settings.offlineMap" />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="settings-section">
        <h2 class="section-title">通知设置</h2>

        <div class="setting-item">
          <div class="setting-label">
            <span>应用通知</span>
            <span class="setting-description">启用或禁用系统通知</span>
          </div>
          <div class="setting-control">
            <label class="toggle">
              <input type="checkbox" v-model="settings.notifications" />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>

        <div class="setting-item" v-if="settings.notifications">
          <div class="setting-label">
            <span>通知声音</span>
            <span class="setting-description">启用或禁用通知声音</span>
          </div>
          <div class="setting-control">
            <label class="toggle">
              <input type="checkbox" v-model="settings.notificationSound" />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 高级设置 -->
      <div class="settings-section">
        <h2 class="section-title">高级设置</h2>

        <div class="setting-item">
          <div class="setting-label">
            <span>开发者模式</span>
            <span class="setting-description">启用开发者功能和日志</span>
          </div>
          <div class="setting-control">
            <label class="toggle">
              <input type="checkbox" v-model="settings.devMode" />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>

        <div class="setting-item" v-if="settings.devMode">
          <div class="setting-label">
            <span>日志级别</span>
            <span class="setting-description">设置应用日志的详细程度</span>
          </div>
          <div class="setting-control">
            <select v-model="settings.logLevel" class="select-control">
              <option value="error">错误</option>
              <option value="warn">警告</option>
              <option value="info">信息</option>
              <option value="debug">调试</option>
            </select>
          </div>
        </div>

        <div class="dangerous-actions">
          <button class="danger-btn" @click="confirmClearData">
            <span class="btn-icon">🗑️</span> 清除所有应用数据
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";

// 设置数据对象
const settings = reactive({
  // 常规设置
  theme: "light",
  language: "zh-CN",
  autoUpdate: true,

  // 文件设置
  savePath: "C:/Users/用户/Documents",
  autoSaveInterval: 5,

  // 地图设置
  mapProvider: "google",
  offlineMap: false,

  // 通知设置
  notifications: true,
  notificationSound: true,

  // 高级设置
  devMode: false,
  logLevel: "error",
});

// 原始设置，用于重置功能
const originalSettings = { ...settings };

// 保存设置
const saveSettings = () => {
  console.log("保存设置:", settings);
  // 这里可以调用Electron API保存设置到本地
  window.electronAPI
    ?.fileOperation?.({
      action: "saveSettings",
      data: settings,
    })
    .then(() => {
      showNotification("设置已保存");
    });
};

// 重置设置
const resetSettings = () => {
  // 将所有设置重置为原始值
  Object.keys(originalSettings).forEach((key) => {
    settings[key] = originalSettings[key];
  });

  showNotification("设置已重置");
};

// 选择保存路径
const selectSavePath = () => {
  console.log("选择保存路径");
  // 这里可以调用Electron API打开文件夹选择对话框
  window.electronAPI
    ?.fileOperation?.({
      action: "selectFolder",
      title: "选择默认保存位置",
    })
    .then((result: any) => {
      if (result && result.path) {
        settings.savePath = result.path;
      }
    });
};

// 确认清除数据
const confirmClearData = () => {
  if (
    confirm(
      "警告：此操作将清除所有应用数据，包括设置、历史记录和缓存。此操作不可撤销。是否继续？"
    )
  ) {
    console.log("清除所有数据");
    // 这里可以调用Electron API清除所有数据
    window.electronAPI
      ?.fileOperation?.({
        action: "clearAllData",
      })
      .then(() => {
        showNotification("所有数据已清除");
        // 重置为默认设置
        resetSettings();
      });
  }
};

// 显示通知
const showNotification = (message: string) => {
  // 在实际应用中，这里可以使用一个通知组件
  alert(message);
};

// 监听设置变化，自动应用某些设置
watch(
  () => settings.theme,
  (newTheme) => {
    // 应用主题
    document.documentElement.setAttribute("data-theme", newTheme);
  }
);

// 初始化：从存储加载设置
const loadSettings = () => {
  // 这里可以调用Electron API从本地加载设置
  window.electronAPI
    ?.fileOperation?.({
      action: "loadSettings",
    })
    .then((result: any) => {
      if (result && result.settings) {
        // 合并加载的设置
        Object.assign(settings, result.settings);
      }
    });
};

// 加载设置
loadSettings();
</script>

<style lang="scss" scoped>
.settings-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h1 {
    font-size: 1.8rem;
    margin: 0;
    color: var(--dark-color);
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  .btn-icon {
    margin-right: 8px;
  }

  &.btn-primary {
    background: var(--primary-gradient);
    color: white;

    &:hover {
      box-shadow: 0 4px 10px rgba(58, 123, 213, 0.3);
    }
  }

  &.btn-secondary {
    background: white;
    color: var(--dark-color);
    border: 1px solid #e1e5eb;

    &:hover {
      background: #f8f9fa;
    }
  }
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.settings-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e5eb;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .section-title {
    font-size: 1.2rem;
    margin: 0 0 20px;
    color: var(--dark-color);
  }
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;

  &:not(:last-child) {
    border-bottom: 1px solid #f0f2f5;
  }
}

.setting-label {
  display: flex;
  flex-direction: column;

  span:first-child {
    font-size: 1rem;
    color: var(--dark-color);
    margin-bottom: 5px;
  }

  .setting-description {
    font-size: 0.8rem;
    color: var(--gray-color);
  }
}

.setting-control {
  width: 200px;

  &.path-control {
    display: flex;
    width: 300px;

    input {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid #e1e5eb;
      border-radius: 4px 0 0 4px;
      font-size: 0.9rem;
    }

    .path-btn {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 0 4px 4px 0;
      cursor: pointer;

      &:hover {
        opacity: 0.9;
      }
    }
  }
}

.select-control {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e1e5eb;
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: white;

  &:focus {
    outline: none;
    border-color: var(--primary-color);
  }
}

.range-control {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  background: #e1e5eb;
  border-radius: 2px;
  outline: none;
  margin-bottom: 10px;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
  }
}

.range-value {
  font-size: 0.9rem;
  color: var(--gray-color);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;

  input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .toggle-slider {
      background: var(--primary-gradient);
    }

    &:checked + .toggle-slider:before {
      transform: translateX(24px);
    }
  }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e1e5eb;
    transition: 0.3s;
    border-radius: 24px;

    &:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.3s;
      border-radius: 50%;
    }
  }
}

.dangerous-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #ff416c;

  .danger-btn {
    background: #fff0f3;
    color: #ff416c;
    border: 1px solid #ff416c;
    padding: 8px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;

    .btn-icon {
      margin-right: 8px;
    }

    &:hover {
      background: #ffd6df;
    }
  }
}
</style>
